<template>
  <a-menu v-model:selectedKeys="selectedKeys" mode="inline" class="layout-sider-menu">
    <template v-for="item in moduleRoots">
      <!-- 没有子导航 -->
      <a-menu-item
        :key="'sider-menu-' + item.name"
        v-if="!item.children || item.children.length === 0"
        @click="openRoute(item)">
        <template #icon>
          <component :is="item.meta.icon ? item.meta.icon : 'appstore-outlined'" />
        </template>
        <span>{{ item.meta.i18n ? $t(item.meta.title) : item.meta.title }}</span>
      </a-menu-item>
      <!-- 有子导航 -->
      <a-sub-menu
        :key="'sider-menu-' + item.name"
        @titleClick="subMenuTitleClick"
        v-if="item.children && item.children.length > 0">
        <!-- 子导航图标 -->
        <template #icon>
          <component :is="item.meta.icon ? item.meta.icon : 'appstore-outlined'" />
        </template>
        <!-- 当前导航标题 -->
        <template #title>{{ item.meta.i18n ? $t(item.meta.title) : item.meta.title }}</template>
        <!-- 子导航 -->
        <a-menu-item
          @click="openRoute(item1)"
          v-for="item1 in item.children"
          @mouseenter="(e) => isShowToltip(e, item1)"
          :key="'sider-menu-' + item1.name">
          <template #icon v-if="item1.meta.icon">
            <component :is="item1.meta.icon" />
          </template>
          <a-tooltip
            placement="right"
            :mouseLeaveDelay="0"
            :destroyTooltipOnHide="true">
            <template #title>
              <span>{{ item1.meta.i18n ? $t(item1.meta.title) : item1.meta.title }}</span>
            </template>
            {{ item1.meta.i18n ? $t(item1.meta.title) : item1.meta.title }}
          </a-tooltip>
        </a-menu-item>

      </a-sub-menu>
    </template>
  </a-menu>
</template>

<script>
export default {
  name: 'SiderMenu',
  components: {
  },
  props:{
    moduleRoots: {
      type: Array,
      required: false,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      selectedKeys: ['sider-menu-'+this.$route.name],
      icon: 'user-outlined'
    }
  },
  methods: {
    isShowToltip(e,item) {
      var b = this.textRange(e.target);
    },
    /**
     * 文本宽度是否超长
     * @param el 元素
     * @return true 内部文本超长，false 内部文本不超长
     */
    textRange (el) {
      const textContent = el
      // div的总宽度
      const targetW = textContent.getBoundingClientRect().width
      const range = document.createRange()
      range.setStart(textContent, 0)
      range.setEnd(textContent, textContent.childNodes.length)
      // 内容宽度
      const rangeWidth = range.getBoundingClientRect().width
      return rangeWidth > 136
    },
    subMenuTitleClick ({ key, domEvent }) {
    },
    openRoute (item, key, keyPath) {
      this.$router.push({
        path: item.path
      })
    }
  }
};
</script>

<style lang="less" scoped>
  .layout-sider-menu{
    width: calc(100% - 1px);
  }
</style>
